<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2018/12/24 0024
  Time: 19:17
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%
    request.setCharacterEncoding("utf-8");
%>
<html>
<head>
    <title>判别用户唯一性</title>
    <style>
        .max{
            background-image:url("images/bg.gif");
            width:509px;
            height:302px;
            margin:0 auto;
        }
        .table{
            float: left;
            margin:50px 20px;
        }
        .table tr{
            border:1px solid red;
            padding:50px 0;
        }
        .promptContainer{
            width: 100px;
            height: 60px;
            background-image: url("images/prompt.jpg");
            margin-left: 338px;
            position: absolute;
            top:95px;
            text-align: center;
            padding-top: 45px;
            padding-left: 25px;
            padding-right: 20px;
            font-size: 10px;
            display: none;
        }
    </style>
</head>
<body>

    <div class="max">
        <form action="#" method="post">
            <table  cellpadding="1" cellspacing="1" border="0" height="260" width="500" class="table">
                <tr style="height: 20px;padding-top: 10px;">
                    <td class="str">用户名:</td>
                    <td>
                        <input type="text" name="name" id="event">
                    </td>
                </tr>
                <tr style="height: 20px;padding-top: 10px;">
                    <td class="str">
                        密码:
                    </td>
                    <td>
                        <input type="password" name="psd">
                    </td>
                </tr>
                <tr style="height: 20px;padding-top: 10px;">
                    <td class="str">
                        确认密码:
                    </td>
                    <td>
                        <input type="password" name="psds">
                    </td>
                </tr>
                <tr style="height: 20px;padding-top: 10px;">
                    <td class="str">
                        email:
                    </td>
                    <td>
                        <input type="email" name="email">
                    </td>
                </tr>
                <tr style="height: 20px;padding-top: 10px;" >
                    <td class="str">
                        <input type="submit" value="注册" style="margin-left:180px;margin-top:-18px;position:absolute;width:100px;font-size: 15px;">
                    </td>
                </tr>
            </table>
        </form>
        <div class="promptContainer">
        </div>
    </div>

    <script type="text/javascript">

        var event=document.getElementById("event");

        // 当光标离开user框时触发事件并执行judge函数(传入触发事件的对象)
        /*①*/event.onblur=function () {
            judge(event);
        }

        /*
        创建连接Ajax
        */
        
        var xhp;
        
        /*③*/function joint(url){
            if(window.XMLHttpRequest){
                xhp=new XMLHttpRequest();
                console.log("连接成功")
            }else if(window.ActiveXObject){
                try{
                    xhp=new ActiveXObject("Msxml2.XMLHTTP");
                }catch(e){
                   try{
                       xhp=new ActiveXObject("Microsoft.XMLHTTP");
                   }catch(e){
                       console.log("连接失败!");
                   }
                }
            }

            try{
                xhp.open('post',url,true);
                // 设置请求头可有可无
                xhp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
                xhp.send("event="+event.value);//将参数传递至后台服务器
                xhp.onreadystatechange=getResult;//指定回调函数处理返回结果
            }catch(e){
                alert("传输发送失败");
            }
        }
        
        /*
        创建回调函数
         */
        
        /*④*/function getResult() {
            if(xhp.readyState==4){
                console.log("请求完成");
                if(xhp.status==200){
                    console.log("请求成功");
                    // 将容器设置可见,获取judge.jsp文件输出的值并写入div容器中
                    document.getElementsByClassName("promptContainer")[0].innerHTML=xhp.responseText;
                    document.getElementsByClassName("promptContainer")[0].style.display="block";
                }else{
                    console.log("你所访问的页面出错!");
                }
            }
        }

        /*
        判断用户名不为null并产生Ajax连接发送请求
         */

        /*②*/function judge(userName){
            if(userName.value==""){
                alert("请输入用户名")
            }else{
                console.log(userName.value);
               //joint('judge.jsp?user='+userName.value);将url地址传进joint函数并将当前用户名传进request请求中
                joint('judge.jsp');//只传递地址不传递参数
            }
        }

    </script>



</body>
</html>
